<template>
    <Layout class="layout-container mask-all">
        <Spin fix v-if="loading" size="large"></Spin>
        <Content>
            <Layout class="layout-container">
                <Sider class="home-sider-style">
                    <Menu theme="light" style="width: 100%;" :active-name="activeMenuType" @on-select="onMenuTypeSelect">
                        <template v-for="menuType in menuTypes">
                            <MenuItem :key="menuType.value" :name="menuType.value">
                            {{menuType.label}}
                            </MenuItem>
                        </template>
                    </Menu>
                </Sider>
                <Content>
                    <Layout class="layout-container">
                        <div class="home-header-style">
                            <Tag type="dot" :color="colorLogin" class="tag-style" @click.native="changeLogin(true)">{{$t('home.login')}}</Tag>
                            <Tag type="dot" :color="colorLogout" class="tag-style" @click.native="changeLogin(false)">{{$t('home.logout')}}</Tag>
                        </div>
                        <Content class="home-content-style">
                            <Input v-if="login" v-model="value.login.template" type="textarea" :autosize="autosize" :placeholder="placeholder" />
                            <Input v-else="login" v-model="value.logout.template" type="textarea" :autosize="autosize" :placeholder="placeholder" />
                        </Content>
                        <div class="padding-all">
                            <span class="pull-right">
                                <Button type="success" @click="preview">{{$t('info.preview')}}</Button>
                                <Button type="warning" @click="example">{{$t('home.example')}}</Button>
                                <Button @click="reset">{{$t('info.reset')}}</Button>
                                <Button type="primary" html-type="submit" @click.prevent="submit">{{$t('info.save')}}</Button>
                            </span>
                        </div>
                    </Layout>
                </Content>
            </Layout>
        </Content>
    </Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Sider, Spin, Menu, MenuItem, Button, Tag, Input } from 'view-design';
import { dict, perms, extend, extendHtml, each, confirm, createWindow, htmlToText, msuccess, merror, alert } from 'config/utils';
import { query, save } from './api';

//数据字典：菜单类型
const MENU_TYPES = "MENU-TYPES";

export default {
    name: "SysMenuManage",
    data() {
        return {
            loading: true,
            perms: {
                save: false
            },
            activeMenuType: '',
            menuTypes: [],
            login: true,
            autosize: {
                minRows: 10
            },
            placeholder: this.$t("info.placeholder", [this.$t("home.template")]),
            value: {
                logout: {
                    id: {
                        type: '',
                        login: false
                    },
                    template: ''
                },
                login: {
                    id: {
                        type: '',
                        login: true
                    },
                    template: ''
                }
            },
            data: []
        };
    },
    computed: {
        colorLogin() {
            return this.login ? "primary" : "default";
        },
        colorLogout() {
            return this.login ? "default" : "primary";
        }
    },
    methods: {
        submit() {
            this.loading = true;
            const value = this.login ? this.value.login : this.value.logout;
            save(value, (res) => {
                if (res.success) {
                    this.extend(res.data);
                    msuccess(this.$t("info.success"));
                }
                this.loading = false;
            });
        },
        extend(data) {
            for (var i = 0; i < this.data.length; i++) {
                if (this.data[i].login == data.login) {
                    extend(this.data[i], data);
                    return;
                }
            }
            this.data.push(data);
        },
        example() {

            const content = '<div>[</div>' +
                '<div style="padding-left: 10px;">{</div>' +
                '<div style="padding-left: 20px;">//参考Row参数，其中class-name参数名改为className</div>' +
                '<div style="padding-left: 20px;">gutter: 0,</div>' +
                '<div style="padding-left: 20px;">cols: [</div>' +
                '<div style="padding-left: 30px;">{</div>' +
                '<div style="padding-left: 40px;">//参考Col参数，其中class-name参数名改为className</div>' +
                '<div style="padding-left: 40px;">span: 24,</div>' +
                '<div style="padding-left: 40px;">//string | ComponentDefinition | ComponentConstructor, 组件id，或者组件对象 </div>' +
                '<div style="padding-left: 40px;">tag: "Welcome",</div>' +
                '<div style="padding-left: 40px;">//传递给组件的参数</div>' +
                '<div style="padding-left: 40px;">params: {},</div>' +
                '<div style="padding-left: 40px;">//参考Row参数，其中class-name参数名改为className</div>' +
                '<div style="padding-left: 40px;">rows: []</div>' +
                '<div style="padding-left: 30px;">}</div>' +
                '<div style="padding-left: 20px;">]</div>' +
                '<div style="padding-left: 10px;">}</div>' +
                '<div>]</div>';
            this.$Modal.info({
                width: 800,
                content: content
            });
        },
        preview() {
            const value = this.login ? this.value.login : this.value.logout;
            const template = value.template;
            if (template) {
                try {
                    const json = eval(`(${template})`);
                    if (json) {
                        createWindow({
                            title: this.$t("home.title"),
                            router: "/home",
                            mask: true,
                            params: json
                        });
                    }
                } catch (e) {
                    merror(this.$t("home.error"));
                }
            } else {
                merror(this.$t("info.placeholder", [this.$t('home.template')]));
            }
        },
        changeLogin(login) {
            this.login = login;
        },
        onMenuTypeSelect(name) {
            this.loading = true;
            this.activeMenuType = name;
            query(name, (res) => {
                if (res.success) {
                    this.data = res.data;
                }
                this.reset();
                this.changeLogin(true);
                this.loading = false;
            });
        },
        reset() {
            this.value.logout = {
                id: {
                    type: this.activeMenuType,
                    login: false
                },
                template: ''
            };
            this.value.login = {
                id: {
                    type: this.activeMenuType,
                    login: true
                },
                template: ''
            };
            each(this.data, (item) => {
                if (item.id.login) {
                    extendHtml(this.value.login, item);
                } else {
                    extendHtml(this.value.logout, item);
                }
            });
        }
    },
    mounted() {
        var params = {
            add: "sys:menu:manager:save"
        };
        perms(params, (isOk, data) => {
            if (isOk) {
                this.perms = data;
            }
            dict({ values: [MENU_TYPES], children: true }, (isOk, data) => {
                if (isOk) {
                    this.menuTypes = data.children;
                    this.$nextTick(() => {
                        this.activeMenuType = this.menuTypes[0].value;
                        this.onMenuTypeSelect(this.activeMenuType);
                    });
                }
            });
        });
    },
    components: {
        Layout,
        Content,
        Sider,
        Spin,
        Menu,
        MenuItem,
        Button,
        Input,
        Tag
    }
}
</script>
<style type="text/css">
.home-sider-style {
    padding: 0.2rem;
    background: #808695;
    overflow-x: hidden;
    overflow-y: auto;
}

.home-sider-style::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1;
}

.home-header-style {
    position: relative;
    padding: 0.5rem;
    background: #f8f8f9;
}

.home-content-style {
    position: relative;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background: #f8f8f9;
}

.tag-style {
    cursor: pointer;
}
</style>